<style rel="stylesheet/scss" lang="scss" scoped>
  .active{
    background-color: #0077B1;
  }
  .taskUl li{
    color: white;
  }
</style>
<template>
  <div class="app-container">
    <el-row type="flex" class="row-bg">
      <el-col :span="8" style="border:1px solid #EBEEF5">
        <!--任务选择框-->
        <el-collapse v-model="activeName" accordion>
          <el-collapse-item title="任务列表" name="1">
            <ul class="taskUl">
              <li :class="activeClass == index ? 'active' : ''"
                  v-for="(item,index) in this.taskDefList" :key="index" @click="getItem(index)" style="margin:1% 6%">
                <a>
                  <el-link :underline="false" type="primary" @click="selectTask(item.taskCode)">
                    {{item.taskName}}({{item.taskCode}})
                  </el-link>
                </a>
              </li>
            </ul>
          </el-collapse-item>
          <!--<el-collapse-item title="??" name="2">
            <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
            <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
          </el-collapse-item>
          <el-collapse-item title="??" name="3">
            <div>简化流程：设计简洁直观的操作流程；</div>
            <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
            <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
          </el-collapse-item>
          <el-collapse-item title="??" name="4">
            <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
            <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
          </el-collapse-item>-->
        </el-collapse>
      </el-col>
      <el-col :span="16" style="padding: 20px;margin-top:-20px;">
        <div class="grid-content bg-purple-light" style="border:1px solid #D6D8DB;">
          <div style="font-size: 14px;margin: 1%;font-weight: 700;">任务执行结果统计
            <el-tooltip class="item" effect="dark" content="任务执行结果统计" placement="bottom">
              <i  style="margin-left: 3%" class="el-icon-question"></i>
            </el-tooltip>
          </div>
          <TaskZxEchars :dataInfo="this.aa" />
        </div>
        <el-collapse v-model="activeNames" style="margin-top:20px;">
         <!-- <el-collapse-item title="图表展示" name="1">

          </el-collapse-item>-->
          <el-collapse-item title="列表展示" name="2">
            <!--表格渲染-->
            <div style="margin-top: 10px">
              <el-table
                ref="table"
                :data="dataList"
                style="width: 100%;"
                height="350"
                @filter-change="taskStatusDictChange"
                :header-cell-style="{background:'#eef1f6',color:'#606266'}">
                <el-table-column  prop="bizDate" label="业务日期" min-width="100" >
                  <template slot-scope="scope">
                    <i class="el-icon-time" v-if="scope.row.bizDate"></i>
                    <span style="margin-left: 10px">{{ scope.row.bizDate }}</span>
                  </template>
                </el-table-column>
                <el-table-column  prop="taskCode" label="任务名称(编码)"  min-width="200" :formatter="formattertaskName" />

                <el-table-column  prop="taskStatus" label="任务状态"
                                  :filters="taskStatusDict" key="taskStatus"
                                  filter-placement="bottom-end"
                                  :filter-multiple="false"
                                  min-width="120"
                                  column-key="taskStatus">
<!--[{ text: '待处理', value: '1' }, { text: '处理中', value: '2' },{ text: '暂停中', value: '3' },
                             { text: '处理完成', value: '4' }, { text: '处理失败', value: '5' }]-->
                  <template slot-scope="scope">
                      <el-tag size="small" :type="taskStatusFormatterType(scope.row.taskStatus)" style="width:60px;">
                          {{taskStatusFormatter(scope.row.taskStatus)}}
                      </el-tag>
                  </template>
                </el-table-column>
                  <!--<el-tag type="info" v-if="scope.row.taskStatus == '1'">待处理</el-tag>
                    <el-tag v-if="scope.row.taskStatus == '2'">处理中</el-tag>
                    <el-tag type="warning" v-if="scope.row.taskStatus == '3'">暂停中</el-tag>
                    <el-tag type="success" v-if="scope.row.taskStatus == '4'">处理完成</el-tag>
                    <el-tag type="danger" v-if="scope.row.taskStatus == '5'">处理失败</el-tag>-->
                <el-table-column  prop="execStTs" label="开始执行时间" min-width="180" />
                <el-table-column  prop="execEndTs" label="执行结束时间" min-width="180" />
                <el-table-column  prop="costTs" label="耗时" />
              </el-table>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-col>
    </el-row>

  </div>
</template>
<script>
  import TaskZxEchars from '../../components/TaskZxEchars'
  import jobDef from '@/api/cycleJob/job_def'
  import Dict from '../../system/dict'
  import CRUD, { presenter, header, form, crud } from '@crud/crud'
  export default {
    name: 'cycletaskEchars',
    components: {TaskZxEchars},
    props: {
      jobCode: {
        type: String,
        default: ''
      },
    },
    dicts: ['task_status'],
    data() {
      return {
        activeClass: -1,
        activeName: '1',
        dataList:[],
        aa:{},
        activeNames: ['1'],
        taskDefList:[],
        taskDict:[],
        taskStatusDict:[],
        taskCode:'',
      };
    },
    created(){
      //初始化任务数据
      this.initTaskList();
     // debugger
      this.taskDict=this.dict.task_status;
    },
    watch:{
      taskDict(){
        this.$nextTick(()=>{
          this.taskDict.forEach(item=>{
            var obj={
              text:item.label,
              value:item.value
            }
            this.taskStatusDict.push(obj)
          })
        })
      },
    },
    methods:{
      taskStatusDictChange(filters){
        var param = {
          taskCode:this.taskCode,
          taskStatus:filters.taskStatus[0]
        }
        jobDef.qryTaskInfoByTables(param).then(res=>{
          this.dataList=res;
        })
      },
      taskStatusFormatterType(val){
        const type = ['','info','primary','warning','success','danger']
        return type[val]
      },
      taskStatusFormatter(val){
        return this.dict.label.task_status[val]
      },
      formattertaskName(val){
        return val.taskName+"("+val.taskCode+")"
      },
      formatterCostTs(val){
        var date1 = new Date(val.execStTs)
        var date2 = new Date(val.execEndTs)
        var s1 = date1.getTime(),s2 = date2.getTime();
        var total = (s2 - s1)/1000;
        var hour,minute,second,module
        if(total>=3600){
          hour=parseInt(total/3600)
          module=parseInt((total-hour*60*60)/60)
          return hour+"时"+module+"分"
        }else if(total>=60 && total<3600){
          minute=parseInt(total/60)
          module=parseInt((total-minute*60)/60)
          return minute+"分"+module+"秒"
        }else{
          second=total
          return second+"秒"
        }
      },
      initTaskList(){
        if(this.jobCode!=''){
          jobDef.queryTaskList(this.jobCode).then(res=>{
            this.taskDefList = res;
          })
        }
      },
      handleChange(){
        this.aa = {isOrder:'1'}
      },
      //选择某个任务的实例图
      selectTask(param){
        jobDef.qryTaskInfoByEchars(param).then(res=>{
          this.aa = res;
        })
        this.taskCode=param;

        var params = {
          taskCode:this.taskCode,
          taskStatus:""
        }
        jobDef.qryTaskInfoByTables(params).then(res=>{
          this.dataList=res;
        })
      },
      getItem(index){
        this.activeClass = index
      }
    },

  }


</script>
